.hidden {
    display: none;
  }
  .show {
    display: block;
  }
  .mytodos {
    width: 50vw;
    margin: 0 auto;
    .mytodos-header {
      h1 {
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 100px;
        font-weight: 100;
        text-align: center;
        color: rgba(175, 47, 47, 0.15);
      }
    }
  
    .mytodos-content {
      border: 1px solid #ddd;
      .mytodos-content-top {
        margin-top: 5px;
        padding: 5px;
        height: 30px;
        display: flex;
        .content-top-left {
          height: 30px;
          flex: 1;
          text-align: center;
          line-height: 30px;
          font-size: 24px;
          color:gray;
          font-weight: bold;
          // transform: rotate(90deg);
        }
        .allchecked {
          color: red;
        }
  
        .content-top-right {
          height: 30px;
          flex: 8;
          input {
            height: 100%;
            width: 100%;
          }
        }
      }
      .mytodos-content-mid {
        .content-mid-list {
          .mid-list-item {
            height: 50px;
            display: flex;
            align-items: center;
            .list-item-left {
              display: flex;
              justify-content: center;
              flex: 1;
              input {
              }
            }
  
            .list-item-mid {
              flex: 8;
              .title {
              }
            }
            .completed {
              color: #ddd;
              text-decoration: line-through;
            }
  
            .list-item-right {
              visibility: hidden;
              display: flex;
              justify-content: center;
              flex: 1;
            }
          }
          .mid-list-item:hover {
            .list-item-right {
              visibility: visible;
              cursor: pointer;
              display: flex;
              justify-content: center;
              flex: 1;
            }
          }
        }
      }
      .mytodos-content-bottom {
        padding: 5px;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .content-bottom-left {
        }
  
        .content-bottom-mid {
          display: flex;
          .active {
            border: 1px solid pink;
          }
          .mid-left {
            margin-right: 5px;
          }
  
          .mid-mid {
            margin-right: 5px;
          }
  
          .mid-right {
            margin-right: 5px;
          }
        }
  
        .content-bottom-right {
        }
      }
    }
  }